<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>办套餐</title>
    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/package.css">
</head>
<body>
<!--快捷导航模块 start-->
<section class="shortcut">
    <div class="w">
        <div class="fl">
            <ul>
                <li>欢迎来到移动网站 &nbsp;</li>
                <li>
                    <!-- <a href="#">请登录</a>&nbsp;<a href="#" class="style_red">请注册</a>-->
                    <!--黄嘉华修改-->
                    <button id="loginLink">请登录</button>&nbsp;
                    <button id="registerLink" class="style_red">请注册</button>
                    <!--黄嘉华修改-->
                </li>
            </ul>
        </div>
        <div class="fr">
            <ul>
                <li><button id="personalCenterBtn">个人中心</button></li>
                <li></li>
                <li><a href="https://www.10086.cn/cmccclient/indexc_new.html" id="clientLink"
                       target="_blank">客户端下载</a></li>
                <li></li>
                <li>客服服务</li>
            </ul>
        </div>
    </div>
</section>
<!--快捷导航模块 end-->
<!--header头部模块start-->
<header class="header w">
    <!--logo模块-->
    <div class="logo">
        <h1>
            <a href="index.html" title="移动营业厅">移动营业厅</a>
        </h1>
    </div>
    <!--search模块 start-->
    <div class="search">
        <input type="search" name=" " id="">
        <button>搜索</button>
    </div>
    <!--search模块 end-->
    <!--二维码模块 start-->
    <div class="download">
        <img src="images/123.jpg">
        <p>扫一扫，下载app</p>
    </div>
    <!--二维码模块 end-->
</header>
<!--header头部模块end-->
<!--nav模块start-->
<nav class="nav">
    <div class="w">
        <div class="dropdown">
            <div class="dt">服务列表</div>
        </div>
        <div class="navitems">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">我的移动</a></li>
                <li><a href="#">服务中心</a></li>
            </ul>
        </div>

    </div>
</nav>
<!--nav模块end-->
<!-- 首页专有的模块 main start -->
<div class="w">
    <div class="main">
<div class="package">
    <div class="package-title">4G套餐</div>
    <div class="package-item">
        <a  onclick="openPopup1()">
            <img src="images/taocan1.png" alt="图片描述" class="package-image"></a>
    </div>
    <div class="package-item">
        <a  onclick="openPopup2()">
            <img src="images/taocan2.png" alt="图片描述" class="package-image"></a>
    </div>
    <div class="package-item">
        <a  onclick="openPopup3()">
            <img src="images/taocan6.png" alt="图片描述" class="package-image"></a>
    </div>
    <div class="package-item">
        <a  onclick="openPopup4()">
            <img src="images/taocan5.png" alt="图片描述" class="package-image"></a>
    </div>
</div>

<div class="package">
    <div class="package-title">5G套餐</div>
    <div class="package-item">
        <a  onclick="openPopup5()">
            <img src="images/taocan3.png" alt="图片描述" class="package-image"></a>
    </div>
    <div class="package-item">
        <a  onclick="openPopup6()">
            <img src="images/taocan4.png" alt="图片描述" class="package-image"></a>
    </div>
    <div class="package-item">
        <a  onclick="openPopup7()">
            <img src="images/taocan7.png" alt="图片描述" class="package-image"></a>
    </div>
    <div class="package-item">
        <a  onclick="openPopup8()">
            <img src="images/taocan8.png" alt="图片描述" class="package-image"></a>
    </div>
</div>
    </div>
</div>
<!-- 首页专有的模块 end -->
<div id="popup1" class="popup">
    <span class="close" onclick="closePopup1()">&times;</span>
    <table>
        <tr>
            <td>套餐名称</td>
            <td>畅玩卡1</td>
        </tr>
        <tr>
            <td>月基本费</td>
            <td>39元</td>
        </tr>
        <tr>
            <td>套餐描述</td>
            <td>畅玩卡39元/月，套餐包含30G流量200分钟语言通话</td>
        </tr>
        <button id="package1" class="btna">立即办理</button>
    </table>
</div>
<script>
    function openPopup1() {
        closeOtherPopups('popup1');
        document.getElementById("popup1").style.display = "block";
    }

    function closePopup1() {
        document.getElementById("popup1").style.display = "none";
    }
    function closeOtherPopups(currentPopupId) {
        var popups = document.querySelectorAll('.popup');
        popups.forEach(function(popup) {
            if (popup.id !== currentPopupId) {
                popup.style.display = 'none';
            }
        });
    }
</script>
<script>
    document.getElementById("package1").addEventListener("click", function() {
        var phoneNumber = "18270598614";
        var newDataBalance = 30000;
        var newPackageId = 1;

        var payload = {
            phoneNumber: phoneNumber,
            Data_Balance: newDataBalance,
            Package_ID: newPackageId
        };

        fetch('/package', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(payload)
        })
            .then(response => {
                if (response.ok) {
                    console.log('套餐信息已成功更新');
                    alert('套餐信息已成功更新');
                } else {
                    console.error('更新失败');
                    alert('更新失败');
                }
            })
            .catch(error => {
                console.error('请求错误:', error);
            });
    })
</script>
<div id="popup2" class="popup">
    <span class="close" onclick="closePopup2()">&times;</span>
    <table>
        <tr>
            <td>套餐名称</td>
            <td>畅玩卡2</td>
        </tr>
        <tr>
            <td>月基本费</td>
            <td>59元</td>
        </tr>
        <tr>
            <td>套餐描述</td>
            <td>畅玩卡59元/月，套餐包含35G流量400分钟语言通话</td>
        </tr>
        <button id="package2" class="btna">立即办理</button>
    </table>

</div>
<script>
    function openPopup2() {
        closeOtherPopups('popup2');
        document.getElementById("popup2").style.display = "block";
    }

    function closePopup2() {
        document.getElementById("popup2").style.display = "none";
    }
    function closeOtherPopups(currentPopupId) {
        var popups = document.querySelectorAll('.popup');
        popups.forEach(function(popup) {
            if (popup.id !== currentPopupId) {
                popup.style.display = 'none';
            }
        });
    }
</script>
<div id="popup3" class="popup">
    <span class="close" onclick="closePopup3()">&times;</span>
    <table>
        <tr>
            <td>套餐名称</td>
            <td>星卡1</td>
        </tr>
        <tr>
            <td>月基本费</td>
            <td>29元</td>
        </tr>
        <tr>
            <td>套餐描述</td>
            <td>星卡29元/月，套餐包含30G流量100分钟语言通话</td>
        </tr>
        <button id="package3" class="btna">立即办理</button>
    </table>

</div>
<script>
    function openPopup3() {
        closeOtherPopups('popup3');
        document.getElementById("popup3").style.display = "block";
    }

    function closePopup3() {
        document.getElementById("popup3").style.display = "none";
    }
    function closeOtherPopups(currentPopupId) {
        var popups = document.querySelectorAll('.popup');
        popups.forEach(function(popup) {
            if (popup.id !== currentPopupId) {
                popup.style.display = 'none';
            }
        });
    }
</script>
<div id="popup4" class="popup">
    <span class="close" onclick="closePopup4()">&times;</span>
    <table>
        <tr>
            <td>套餐名称</td>
            <td>星卡2</td>
        </tr>
        <tr>
            <td>月基本费</td>
            <td>39元</td>
        </tr>
        <tr>
            <td>套餐描述</td>
            <td>星卡39元/月，套餐包含35G流量200分钟语言通话</td>
        </tr>
        <button id="package4" class="btna">立即办理</button>
    </table>

</div>
<script>
    function openPopup4() {
        closeOtherPopups('popup4');
        document.getElementById("popup4").style.display = "block";
    }

    function closePopup4() {
        document.getElementById("popup4").style.display = "none";
    }
    function closeOtherPopups(currentPopupId) {
        var popups = document.querySelectorAll('.popup');
        popups.forEach(function(popup) {
            if (popup.id !== currentPopupId) {
                popup.style.display = 'none';
            }
        });
    }
</script>
<div id="popup5" class="popup">
    <span class="close" onclick="closePopup5()">&times;</span>
    <table>
        <tr>
            <td>套餐名称</td>
            <td>5G畅享卡1</td>
        </tr>
        <tr>
            <td>月基本费</td>
            <td>99元</td>
        </tr>
        <tr>
            <td>套餐描述</td>
            <td>5G畅享卡99元/月，套餐包含20G流量200分钟语言通话</td>
        </tr>
        <button id="package5" class="btna">立即办理</button>
    </table>

</div>
<script>
    function openPopup5() {
        closeOtherPopups('popup5');
        document.getElementById("popup5").style.display = "block";
    }

    function closePopup5() {
        document.getElementById("popup5").style.display = "none";
    }
    function closeOtherPopups(currentPopupId) {
        var popups = document.querySelectorAll('.popup');
        popups.forEach(function(popup) {
            if (popup.id !== currentPopupId) {
                popup.style.display = 'none';
            }
        });
    }
</script>
<div id="popup6" class="popup">
    <span class="close" onclick="closePopup6()">&times;</span>
    <table>
        <tr>
            <td>套餐名称</td>
            <td>5G畅享卡2</td>
        </tr>
        <tr>
            <td>月基本费</td>
            <td>169元</td>
        </tr>
        <tr>
            <td>套餐描述</td>
            <td>5G畅享卡169元/月，套餐包含40G流量800分钟语言通话</td>
        </tr>
        <button id="package6" class="btna">立即办理</button>
    </table>

</div>
<script>
    function openPopup6() {
        closeOtherPopups('popup6');
        document.getElementById("popup6").style.display = "block";
    }

    function closePopup6() {
        document.getElementById("popup6").style.display = "none";
    }
    function closeOtherPopups(currentPopupId) {
        var popups = document.querySelectorAll('.popup');
        popups.forEach(function(popup) {
            if (popup.id !== currentPopupId) {
                popup.style.display = 'none';
            }
        });
    }
</script>
<div id="popup7" class="popup">
    <span class="close" onclick="closePopup7()">&times;</span>
    <table>
        <tr>
            <td>套餐名称</td>
            <td>5G畅享卡3</td>
        </tr>
        <tr>
            <td>月基本费</td>
            <td>199元</td>
        </tr>
        <tr>
            <td>套餐描述</td>
            <td>5G畅享卡199元/月，套餐包含60G流量1000分钟语言通话</td>
        </tr>
        <button id="package7" class="btna">立即办理</button>
    </table>

</div>
<script>
    function openPopup7() {
        closeOtherPopups('popup7');
        document.getElementById("popup7").style.display = "block";
    }

    function closePopup7() {
        document.getElementById("popup7").style.display = "none";
    }
    function closeOtherPopups(currentPopupId) {
        var popups = document.querySelectorAll('.popup');
        popups.forEach(function(popup) {
            if (popup.id !== currentPopupId) {
                popup.style.display = 'none';
            }
        });
    }
</script>
<div id="popup8" class="popup">
    <span class="close" onclick="closePopup8()">&times;</span>
    <table>
        <tr>
            <td>套餐名称</td>
            <td>5G畅享卡4</td>
        </tr>
        <tr>
            <td>月基本费</td>
            <td>239元</td>
        </tr>
        <tr>
            <td>套餐描述</td>
            <td>5G畅享卡239元/月，套餐包含80G流量1000分钟语言通话</td>
        </tr>
        <button id="package8" class="btna">立即办理</button>
    </table>

</div>
<script>
    function openPopup8() {
        closeOtherPopups('popup8');
        document.getElementById("popup8").style.display = "block";
    }

    function closePopup8() {
        document.getElementById("popup8").style.display = "none";
    }
    function closeOtherPopups(currentPopupId) {
        var popups = document.querySelectorAll('.popup');
        popups.forEach(function(popup) {
            if (popup.id !== currentPopupId) {
                popup.style.display = 'none';
            }
        });
    }
</script>

</body>
</html>